<template>
  <view class="container">
    <!-- 商家头图 -->
    <view class="swiper-section">
      <u-swiper :list="spotImages" :autoplay="true" :circular="true" :interval="3000" height="300"></u-swiper>
    </view>
    <!-- 商家信息卡片 -->
    <view class="card shop-card">
      <image :src="model.logo" class="shop-logo" mode="aspectFill" />
      <text class="shop-name">{{ model.name }}</text>
      <text class="shop-desc">{{ model.description }}</text>
    </view>

    <!-- 信息列表 -->
    <view class="card info-card">
      <view class="info-item">
        <text class="label">营业时间：</text>
        <text>{{ model.businessHours }}</text>
      </view>
      <view class="info-item">
        <text class="label">地址：</text>
        <text>{{ model.address }}</text>
      </view>
      <view class="info-item">
        <text class="label"> 联系电话：</text>
        <text>{{ model.phone }}</text>
      </view>
      <view class="info-item">
        <text class="label"> 人均消费：</text>
        <text>{{ model.averageCost }} 元</text>
      </view>
      <view style="display: flex; gap: 10upx; margin-bottom: 10upx;">
        <text class="label"> 评分：</text>
        <u-rate :value="model.rating" :count="5" :size="14" active-color="#fbbf24" inactive-color="#e5e7eb" :readonly="true"></u-rate>
      </view>
      <view style="display: flex; gap: 10upx;">
        <template v-for="item in spotTags">
          <u-tag :text="item" size="mini" shape="circle" plain></u-tag>
        </template>
      </view>
    </view>

    <!-- 推荐商品 -->
    <view class="card recommend-card" v-if="false">
      <text class="section-title">推荐商品</text>
      <scroll-view scroll-x class="product-list">
        <view v-for="(product, index) in list" :key="index" class="product-item" @click="navigateToProduct(product.id)">
          <image :src="product.image" class="product-img" mode="aspectFill" />
          <text class="product-name">{{ product.name }}</text>
          <text class="product-price">￥{{ product.price }}</text>
        </view>
      </scroll-view>
    </view>
    <view style="display: flex; gap: 10px; padding: 10px;">
      <u-button type="success" @click="handleCallPhone">打电话</u-button>
      <u-button type="warning" @click="handleNavMap">去他家</u-button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        model: {
          id: '', // 商家ID，用于请求详细信息
          logo: 'https://picsum.photos/800/400?random=10300', // 默认图片
          name: '加载中...',
          description: '',
          openingHours: '',
          address: '',
          phone: ''
        },
        list: [] // 推荐商品列表
      };
    },
    computed: {
      spotTags() {
        try {
          return this.model.tagsJson ? JSON.parse(this.model.tagsJson) : [];
        } catch (e) {
          console.error("Error parsing tagsJson:", e);
          return [];
        }
      },
      spotImages() {
        try {
          return this.model.imageUrls ? JSON.parse(this.model.imageUrls) : [];
        } catch (e) {
          console.error("Error parsing imageUrls:", e);
          return [];
        }
      }
    },
    onLoad(options) {
      this.model.id = options.id;
      this.fetchData();
    },
    methods: {
      fetchData() {
        uni.$u.http.get('/api/shop/' + this.model.id).then(response => {
          let { code, message, result } = response.data
          if (code != 200) {
            this.$u.toast(message)
            return
          }
          this.model = result
          // console.log(result)
        }).catch(err => {
          console.error('获取信息失败:', err)
        })

        this.list = [
          { image: 'https://picsum.photos/800/400?t0', name: '招牌红烧肉', price: '38' },
          { image: 'https://picsum.photos/800/400?t110', name: '特色水煮鱼', price: '45' },
          { image: 'https://picsum.photos/800/400?t120', name: '经典宫保鸡丁', price: '28' },
          { image: 'https://picsum.photos/800/400?t130', name: '清蒸鲈鱼', price: '68' }
        ];

      },
      handleCallPhone() {

      },
      handleNavMap() {

      }
    }
  }
</script>

<style scoped>
  /* 页面容器 */
  .container {
    background-color: #f5f5f5;
    padding-bottom: 40rpx;
    min-height: 100vh;
  }

  /* 商家头图 */
  .shop-banner {
    width: 100%;
    height: 400rpx;
    border-radius: 0 0 30rpx 30rpx;
    overflow: hidden;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
  }

  /* 卡片基础样式 */
  .card {
    margin: 10rpx;
    padding: 30rpx;
    background-color: #fff;
    border-radius: 20rpx;
    box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.05);
  }

  /* 商家信息卡片 */
  .shop-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 50rpx;
  }

  .shop-logo {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    margin-top: -80rpx;
    border: 4rpx solid #fff;
    box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
  }

  .shop-name {
    margin-top: 20rpx;
    font-size: 40rpx;
    font-weight: bold;
  }

  .shop-desc {
    margin-top: 10rpx;
    color: #666;
    font-size: 28rpx;
    text-align: center;
    padding: 0 40rpx;
  }

  /* 信息列表 */
  .info-card {
    padding: 20rpx 30rpx;
  }

  .info-item {
    margin: 20rpx 0;
    font-size: 28rpx;
    color: #333;
  }

  .label {
    font-weight: bold;
    color: #888;
  }

  /* 推荐商品 */
  .recommend-card {
    padding: 20rpx;
  }

  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    display: block;
  }

  .product-list {
    white-space: nowrap;
  }

  .product-item {
    display: inline-block;
    width: 260rpx;
    margin-right: 20rpx;
    background-color: #fff;
    border-radius: 16rpx;
    padding: 10rpx;
    box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.05);
  }

  .product-img {
    width: 100%;
    height: 260rpx;
    border-radius: 12rpx;
  }

  .product-name {
    display: block;
    margin-top: 10rpx;
    font-size: 28rpx;
    color: #333;
    text-align: center;
  }

  .product-price {
    display: block;
    color: #e4393c;
    font-size: 30rpx;
    text-align: center;
    margin-top: 10rpx;
  }
</style>